<template>
	<gui-page ref="guiPage" :customHeader="true">
		<template v-slot:gHeader>
			<nav-bar-custom scanType="0" @clickLeftBack="handelSure" left-icon="left" :title="$t('navigationBar.warehouseSetting')"></nav-bar-custom>
		</template>
		<template v-slot:gBody>
			<view class="page-auto warehouse-guiPage">
				<view class="warehouse-head">
					<view class="box-bg">
						<view class="input-view">
							<uni-icons class="input-uni-icon" type="search" size="18" color="#999" />
							<input confirm-type="search" class="nav-bar-input" type="text" :placeholder="$t('pageTranslation.plsInputKey')"
							    v-model="data.warehouseName" @confirm="search" />
						</view>
						<view class="city" @click="search">
							{{$t('distributedEnter.search')}}
						</view>
					</view>
				</view>
				<!-- 仓库 -->
				<view class="content-title warehouse-row">
					<view class="row-item">
						{{$t('translationImage.serialNumber')}}
					</view>
					<view class="row-item">
						{{$t('multilingual.coding')}}
					</view>
					<view class="row-item">
						{{$t('multilingual.name')}}
					</view>
					<view class="row-item">
						{{$t('multilingual.state')}}
					</view>
				</view>
				<scroll-view scroll-y="true" class="element-auto">
					<view v-for="(item,index) in data.list" :key="`${item.id}`" class="warehouse-row">
						<view class="row-item">
							{{index}}
						</view>
						<view class="row-item">
							{{item.warehouseCode}}
						</view>
						<view class="row-item">
							{{item.warehouseName}}
						</view>
						<view class="row-item">
							<switch :checked="item.switchBool" @change="change($event,index)" style="transform:scale(0.7)" />
						</view>
					</view>
					<view v-if="data.noticeHooks" class="noticeHooks">
					    {{data.list.length == 0 ? $t('stockManage.notAvailable') : $t('stockManage.without')}}
					</view>
				</scroll-view>
				<!-- 底部操作栏 -->
				<view class="page-bottom-box">
					<view class="page-bottomBtn bottomBtn-bgcolor-green" @click="handelSure">{{$t('calendar.confirm')}}</view>
				</view>
			</view>
		</template>
	</gui-page>
</template>

<script setup>
	import {
		reactive,
		computed,
		onMounted
	} from 'vue';
	import { DEFAULT_WAREHOUSECODE, DEFAULT_WAREHOUSENAME,DEFAULT_WAREHOUSEID} from '@/constant/index.js'
	import { navigateBack } from '@/utils/routerSkip.js';
	import { useStore } from "vuex";
	import {
		getIsUsePageSetPDA
	} from '@/api/api.js'
	//引入国际化
	import { useI18n } from 'vue-i18n';
	const { t } = useI18n();
	let store = useStore();
	let data = reactive({
		list:[], //数据源
		noticeHooks:false, // 是否有数据标识
		warehouseName:'', // 搜索warehouseName
	})
	onMounted(()=>{
		getRequestData()
	})
	const change = (e, index)=>{
		let { value } = e.detail
		data.list.map((item,i)=>{
			if(index == i){
				item.switchBool = value // 当前选中
				uni.setStorageSync(DEFAULT_WAREHOUSECODE, value ? item.warehouseCode : '');
				uni.setStorageSync(DEFAULT_WAREHOUSENAME, value ? item.warehouseName : '');
				uni.setStorageSync(DEFAULT_WAREHOUSEID, value ? item.id + '' : '');
			}else{
				item.switchBool = false // 重置所有未选中状态
			}
		})
	}
	data.defaultWarehouseName = computed(()=>{
		return store.state.defaultWarehouseName
	})
	// 查询初始化数据
	const getRequestData = () => {
		let parmes = {
			warehouseName:data.warehouseName
		}
		getIsUsePageSetPDA(parmes).then(res => {
			if (res.status == 200) {
				data.noticeHooks = false
				if (res.data.rows.length == 0) {
					data.noticeHooks = true
				}
				let rows = res.data.rows
				rows.map((item)=>{
					item.switchBool = false
					// 设置默认仓库的选中状态
					let defaultWarehouseCode = uni.getStorageSync(DEFAULT_WAREHOUSECODE) || '';
					if(defaultWarehouseCode == item.warehouseCode){
						item.switchBool = true
					}
				})
				console.log(rows)
				data.list = res.data.rows
			}
		})
	}
	// 搜索
	const search = ()=> {
		getRequestData()
	}
	// 确认
	const handelSure = ()=>{
		let bool = data.list.some((item)=>{
			return item.switchBool
		})
		if(!bool){
			uni.showToast({ title: t('materials.pleaseSetTheDefault'), icon: "none" });
			return
		}
		navigateBack()
	}
</script>

<style lang="scss" scoped>
	.page-bottom-box{
		position: fixed;
		bottom: 0px;
	}
	.warehouse-guiPage {
		background: #fff;
	}

	.city {
		width: 120rpx;
		text-align: center;
	}

	.warehouse-head {
		display: flex;
		align-items: center;
		margin-bottom: 30rpx;

		.mini-btn {
			height: 64rpx;
		}
	}

	.box-bg {
		padding: 10rpx 30rpx;
		width: 690rpx;
		display: flex;
		align-items: center;
		background-color: #fff;
	}

	.input-uni-icon {
		line-height: 60rpx;
	}

	.nav-bar-input {
		height: 60rpx;
		line-height: 60rpx;
		width: 500rpx;
		padding: 0 5px;
		font-size: 12px;
		background-color: #f8f8f8;
	}

	.input-view {
		/* #ifndef APP-PLUS-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		// width: 500rpx;
		flex: 1;
		background-color: #f8f8f8;
		height: 60rpx;
		border-radius: 15px;
		padding: 0 15px;
		flex-wrap: nowrap;
		margin: 7px 0;
		line-height: 60rpx;
	}

	.warehouse-row {
		width: 100%;
		display: flex;

		.row-item {
			text-align: center;
			width: 25%;
			height: 60rpx;
		}
	}
	.noticeHooks{
		display: flex;
		align-items: center;
		justify-content: center;
		height: 80rpx;
		font-size: 32rpx;
		color: #999;
	}
</style>
